<template>
	<view >
		<view class="top">
			<view class="search">
				<text class="borrow">借贷</text>
				<input placeholder="搜索相关信息" class="put" type="text" value="" />
				<image class="talk" src="../../static/found/circle/list.png" mode=""></image>
			</view>
		</view>
		
		<view class="main">
			<view class="flot">
				<text class="high">最高可借额度(元)</text>
				<text class="num">200,000,00</text>
				<text class="tip">审批便捷|年综合费率最低可至7.2%</text>
				<button class="btn" type="default">同意协议并领取</button>
				<text class="agree">同意</text><text class="prower">翔瑞借贷协议及信息授权</text>
				<view class="step">
					<view class="three">三步领取</view>
					<view class="">
						<view class="order"><text>1</text></view>
						<text class="ctx">实名认证</text>
						<text class="cro">····></text>
						<view class="order"><text>2</text></view>
						<text class="ctx">银行卡认证</text>
						<text class="cro">····></text>
						<view class="order"><text>3</text></view>
						<text class="ctx">信用评估</text>
					</view>
				</view>
			</view>
			<view class="dimond">
				<view class="dimond-item">
					<image class="dimond-img" src="../../static/borrow/bill.png" mode=""></image>
					<text>抢疯了</text>
				</view>
				<view class="dimond-item">
					<image class="dimond-img" src="../../static/borrow/video.png" mode=""></image>
					<text>30天免息</text>
				</view>
				<view class="dimond-item">
					<image class="dimond-img" src="../../static/borrow/page.png" mode=""></image>
					<text>做任务</text>
				</view>
				<view class="dimond-item">
					<image class="dimond-img" src="../../static/borrow/gift.png" mode=""></image>
					<text>兑好礼</text>
				</view>
				<view class="dimond-item">
					<image class="dimond-img" src="../../static/borrow/dimond.png" mode=""></image>
					<text>赚奖励</text>
				</view>
			</view>
			<view class="nav">
				<view class="li"></view>
				<text class="nav-txt">新人专享礼</text>
			</view>
			<scroll-view class="juan" scroll-x="true" >
				<view class="juan-item">
					<view class="on">
						<view class="on-txt">最</view>
						<view class="on-txt">高</view>
					</view>
					<text class="nine">90</text>
					<text class="rmb">元</text>
					
					<view class="right">
						<text class="new">新人免息券</text>
						<text class="first">翔瑞借首次借款可用</text>
					</view>
					<button class="du" type="default">获取额度</button>
				</view>
				<view class="juan-item2">
					<view class="on">
						<view class="on-txt">最</view>
						<view class="on-txt">高</view>
					</view>
					<text class="nine">90</text>
					<text class="rmb">元</text>
					
					<view class="right">
						<text class="new">新人免息券</text>
						<text class="first">翔瑞借首次借款可用</text>
					</view>
					<button class="du" type="default">获取额度</button>
				</view>
			</scroll-view>
			<view class="save" >
				<view class="li"></view>
				<text class="save-txt">省心借钱</text>
				<text class="save-next">借现金 更懂你</text>
			</view>
			<view class="list-item">
				<text class="upgrade">升级贷</text>
				<view class="real">纯信用</view>
				<view class="edu">额度循环</view>
				<view class="easy">随借随还</view>
				<view class="remain">
					<text class="try">最高可借额度(元)</text>
					<text class="total">300,000.00</text>
				</view>
				<button class="pass" type="default">去开通</button>
			</view>
			<view class="list-item">
				<text class="upgrade">省心借</text>
				<view class="ri">日息低至万三</view>
				<view class="kan">门槛低到账快</view>
				<view class="remain">
					<text class="try">最高可借额度(元)</text>
					<text class="total">200,000.00</text>
				</view>
				<button class="pass" type="default">去开通</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.search{
		width: 704rpx;
		height: 64rpx;
		background-color: #3476f1;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.top{
		width: 100%;
		height: 234rpx;
		background-color: #3476f1;
	}
	.talk{
		width: 52rpx;
		height: 44rpx 
	}
	.put{
		width: 520rpx;
		height: 62rpx;
		border-radius: 30rpx;
		background-color: #FFFFFF;
		background-image: url(../../static/found/circle/roadone.png);
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-position: 16rpx 16rpx;
		padding-left: 60rpx;
	}
	.borrow{
		color: #FFFFFF;
		font-weight: bold;
		font-size: 40rpx;
	}
	.flot{
		width: 704rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		position: relative;
		top: -140rpx;
		border: 1rpx solid #CCCCCC;
		border-radius: 20rpx;
	}
	.high{
		display: block;
		margin-top: 36rpx;
		color: #8d8d8d;
		text-align: center;
		font-size: 30rpx;
	}
	.num{
		color: #333333;
		display: block;
		text-align: center;
		margin-top: 20rpx;
		font-size: 40rpx;
		font-weight: bold;
	}
	.tip{
		display: block;
		margin-top:	20rpx;
		text-align: center;
		color: #8D8D8D;
		font-size: 30rpx;
	}
	.btn{
		width: 526rpx;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #3476F1;
		color: #edf3fe;
		margin-top: 20rpx;
		border-radius: 50rpx;
		font-size: 35rpx;
	}
	.agree{
		font-size: 25rpx;
		margin-left: 210rpx;
	}
	.prower{
		font-size: 25rpx;
		color: #4e87f2;
	}
	.step{
		width: 656rpx;
		height: 68rpx;
		background-color: #eaf1fe;
		font-size: 30rpx;
		margin: 18rpx auto;
		line-height: 1rpx;
		display: flex;
		align-items: center;
	}
	.three{
		display: inline-block;
		width: 40rpx;
		height: 60rpx;
		font-size: 20rpx;
		line-height: 30rpx;
		margin-left: 20rpx;
	}
	.order{
		width: 24rpx;
		height: 24rpx;
		background-color: #FFFFFF;
		border-radius: 50%;
		display: inline-block;
		font-size: 20rpx;
		line-height: 24rpx;
		text-align: center;
		vertical-align: middle;
		margin-left: 10rpx;
	}
	.ctx{
		vertical-align: middle;
		font-size: 25rpx;
	}
	.cro{
		color: #dadee4;
	}
	.dimond{
		width: 704rpx;
		height: 132rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: -100rpx auto;
	}
	.dimond-item{
		width: 108rpx;
		height: 132rpx;
		font-size: 25rpx;
		text-align: center;
	}
	.dimond-img{
		width: 96rpx;
		height: 96rpx;
	}
	.li{
		width: 8rpx;
		height: 28rpx;
		background-color: #3476F1;
	}
	.nav{
		margin-top: 150rpx;
		margin-left: 50rpx;
		display: flex;
		align-items: center;
	}
	.nav-txt{
		margin-left: 20rpx;
		font-size: 30rpx;
	}
	.juan{
		height: 156rpx;
		white-space: nowrap;
		margin-top: 20rpx;
		margin-left: 40rpx;
		overflow: hidden;
	}
	.juan-item{
		width: 646rpx;
		height: 156rpx;
		display: inline-block;
		background-image: url(../../static/borrow/decrease.png);
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;
	}
	.juan-item2{
		width: 646rpx;
		height: 156rpx;
		display: inline-block;
		background-image: url(../../static/borrow/decrease.png);
		background-repeat: no-repeat;
		background-size: cover;
		margin-left: 16rpx;
		overflow: hidden;
	}
	.on{
		margin-left: 30rpx;
		margin-top: 50rpx;
		display: inline-block;
	}
	.on-txt{
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.nine{
		font-size: 50rpx;
		color: #FFFFFF;
		margin-left: 10rpx;
	}
	.rmb{
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.new{
		font-size: 35rpx;
		display: block;
		color: #FFFFFF;
	}
	.first{
		font-size: 30rpx;
		display: block;
		color: #FFFFFF;
	}
	.right{
		display: inline-block;
		margin-left: 40rpx;
	}
	.du{
		width: 164rpx;
		height: 52rpx;
		display: inline-block;
		font-size: 30rpx;
		line-height: 52rpx;
		text-align: center;
		color: #e2bf7c;
		border-radius: 40rpx;
		margin-left: 20rpx;
	}
	.save{
		margin-top: 50rpx;
		margin-left: 50rpx;
		display: flex;
		align-items: center;
	}
	.save-txt{
		margin-left: 20rpx;
		font-size: 30rpx;
	}
	.save-next{
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #c6c6c6;
	}
	.list-item{
		width: 660rpx;
		height: 218rpx;
		border: 1rpx solid #CCCCCC;
		margin: 20rpx auto;
		border-radius: 30rpx;
		padding: 28rpx;
		box-sizing: border-box;
	}
	.upgrade{
		font-weight: bold;
		display: block;
	}
	.real{
		width: 90rpx;
		height: 40rpx;
		border: 1rpx solid #3476F1;
		color: #3476F1;
		text-align: center;
		font-size: 30rpx;
		display: inline-block;
	}
	.edu{
		width: 120rpx;
		height: 40rpx;
		border: 1rpx solid #a8dae3;
		color: #a8dae3;
		text-align: center;
		font-size: 30rpx;
		margin-left: 20rpx;
		display: inline-block;
	}
	.easy{
		width: 120rpx;
		height: 40rpx;
		border: 1rpx solid #69b3f0;
		color: #69b3f0;
		text-align: center;
		font-size: 30rpx;
		margin-left: 20rpx;
		display: inline-block;
	}
	.try{
		color: #aeaeae;
		font-size: 30rpx;
		display: inline-block;

	}
	.notice{
		
	}
	.total{
		color: #f85656;
		font-size: 40rpx;
		font-weight: bold;
		display: inline-block;
	}
	.pass{
		width: 174rpx;
		height: 66rpx;
		line-height: 66rpx;
		background-color: #3476F1;
		color: #FFFFFF;
		font-size: 30rpx;
		border-radius: 50rpx;
		display: inline-block;
		position: relative;
		left: 420rpx;
		top: -120rpx;
	}
	.remain{
		display: block;
		margin-top: 20rpx;
	}
	.ri{
		width: 180rpx;
		height: 40rpx;
		border: 1rpx solid #a8dae3;
		color: #a8dae3;
		text-align: center;
		font-size: 30rpx;
		display: inline-block;
	}
	.kan{
		width: 180rpx;
		height: 40rpx;
		border: 1rpx solid #69b3f0;
		color: #69b3f0;
		text-align: center;
		font-size: 30rpx;
		margin-left: 20rpx;
		display: inline-block;
	}
</style>
